<template>
  <a-modal
    title="医院名称修改"
    :open="open"
    :centered="true"
    ok-text="确定"
    cancel-text="取消"
    :mask-closable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form
      :model="model"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 16 }"
      :rules="rules"
      ref="formRef"
    >
      <a-form-item
        name="name"
      >
        <template #label>
          <span class="text-[18px]">医院名称:</span>
        </template>
        <a-input v-model:value="model.name" placeholder="请输入医院名称"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import {useStore} from "vuex";
import axios from "axios";
import API_BASE_URL from "../../config";
import {message} from "ant-design-vue";
import {reactive, ref, watch} from "vue";

export default {
  name: "HospitalEdit",
  setup() {
    const store = useStore()
    const open = ref(false)

    const model = reactive({
      name: '',
    })

    const rules = reactive({
      name: [
        {
          required: true,
          message: '请输入至少医院名称',
        }
      ]
    })

    const showModal = () => {
      open.value = true
    }
    const handleCancel = () => {
      open.value = false
      //清空输入
      model.name = ''
    }
    const formRef = ref(null)
    const handleOk = () => {
      formRef.value.validate().then((valid) => {
        if (!valid) {
          return
        }
        let formData = new FormData()
        formData.append('name', model.name)

        axios.post(`${API_BASE_URL}/hospital/edit`, formData).then((res) => {
          if (res.data.code === 200) {
            console.log(res.data.message)
            message.success('修改成功')
            store.commit('setHospitalInfo', res.data.data)
            open.value = false
          }
        })
      })
    }

    return {
      open,
      model,
      rules,
      formRef,
      handleCancel,
      handleOk,
      showModal,

    }
  }
}
</script>

<style scoped>

</style>
